<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>兑换中心</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <!-- 引入相关样式 -->
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css">
  <link rel="stylesheet" href="../../css/exchange/exchangeMainPage.css" media="all">
  <link rel="stylesheet" href="../../css/exchange/calendar.css" media="all">
  <link rel="stylesheet" href="../../css/exchange/personalInfo.css" />
  <style>
  	#calendar .layui-laydate-main{width:650px;}
		#calendar .layui-laydate-content td,#calendar .layui-laydate-content th{width:92px;height: 55px;font-size: 20px;}
  </style>

</head>

<body>

  	<!-- 页面顶部 -->
  	<div class="layui-container exchange-header">
	    <div class="layui-row exchange-header-main">
	      	<!-- 顶部左侧logo -->
	      	<div class="exchange-header-logo">
		        <a href="beforeloginmainpage.html" title="兑换中心">
		          <img src="../../img/exchange/logo.png">
		        </a>
	      	</div>
	      	<!-- 顶部右上角小菜单 -->
	      	<div class="exchange-header-tmenu">
		        <span class="layui-breadcrumb" lay-separator="|">
		          <a href="../user/login_by_username.html">登录</a>
		          <a href="../user/user_register1_new.html">免费注册</a>
		        </span>
	      	</div>
	      	<!-- 顶部主要菜单 -->
	      	<div class="exchange-header-menu">
		        <ul class="layui-nav" lay-filter="">
		          <li class="layui-nav-item layui-this"><a href="exchangeMainPage.html">兑换中心</a></li>
		        </ul>
	      	</div>
	      	<a class="exchange-header-ad" href="" title="这里可以放广告"></a>
	    </div>
  	</div>

  	<!-- 页面主体 -->
  	<div class="exchange-body">
        <div class="exchange-body-main">
        	<!--兑换日历-->
        	<div class="main-left">
	        	<div class="layui-inline" id="calendar"></div>
    		</div>
    		<!--可兑信息-->
    		<div class="main-right">
    			<h4 style="text-align: center;">普通兑换</h4>
    			<table id="normalexchange" class="normalexchange" lay-filter="normalexchange"></table>
    			<h4 style="text-align: center;">秒杀兑换</h4>
    			<table id="seckillexchange" class="seckillexchange" lay-filter="seckillexchange"></table>
    		</div>
        </div>
    </div>

    <!-- 网页底部 -->
    <div class="exchange-footer">
    	<p>© 2018 <a href="https://www.baidu.com/" target="_blank">交易系统</a></p>
	    <p>
	        <span><a href="https://www.baidu.com/" target="_blank">公司简介</a></span>
	        <span><a href="https://www.baidu.com/" target="_blank">广告服务</a></span>
	        <span><a href="https://www.baidu.com/" target="_blank">联系我们</a></span>
	        <span><a href="https://www.baidu.com/" target="_blank">招贤纳士</a></span>
	    </p>
	    <p>网络文化经营许可证</p>
    </div>
    
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../js/jquery-1.8.3.js"></script>
    <script src="../../js/jquery.cookie.js"></script>
    <script src="../../js/user/common.js"></script>
    <script src="../../js/exchange/changetimetype.js"></script>
    <script>
		layui.use(['table','jquery','laydate','layer','element'], function(){
		  var table = layui.table,
		  $ = layui.$,
		  laydate = layui.laydate,
		  layer = layui.layer,
		  element = layui.element;
		  
		  //获取系统当前时间
		  var time = new Date().getTime();
		  var indextime = changetimetype(time);
		  console.log(indextime);
		  
		  var choosetime;
		  //执行一个laydate实例
		  laydate.render({
		    elem: '#calendar',
		    position: 'static',
		    showBottom: false,
		    calendar: true,
			  ready: function(){//控件初始打开的回调
						console.log(indextime);
						
						//普通兑换
					  table.render({
					    elem: '#normalexchange',
					    height:190,
					    url: urlHead2 + '/orderup/showAllUserOrdupRoom', //数据接口
						where:{//传参
							dateStr:indextime
						},
					    skin: 'line', //行边框风格
					    cols: [[ //表头
					      	{field: 'roomname', title: '酒店名称'},
					      	{field: 'exrate', title: '兑换比例',align:"center",
					      		templet:function(d){
					      			console.log(d);
					      			var showexrate = 1 + ":" + d.exrate;
					      			return showexrate;
					      		}
					      	}
					    ]],
					     done: function(res, curr, count){
					     	console.log(res);
					     }
					  });
					  
					 		// 秒杀兑换
					   table.render({
					    elem: '#seckillexchange',
					    height:190,
					    url: urlHead2 + "/killup/getKillupRoom", //数据接口
						where:{//传参
							dateStr:indextime
						},
					    skin: 'line', //行边框风格
					    cols: [[ //表头
					      	{field: 'roomname', title: '酒店名称'},
					      	{field: 'rate', title: '兑换比例',align:"center",
						      	templet:function(d){
					      			var showrate = 1 + ":" + d.rate;
					      			return showrate;
						      	}
					      	},
                            {field:'begintime',title:'开始时间',style:'color:#FF5722',width:163,align:"center",
                                templet:function (d) {
                                    var begintime = changetimetype(d.begintime);//转换时间格式
                                    return begintime;
                                }
                            }
					    ]]
					  });
			  },
		    done: function(value, date){//控件选择完毕后的回调
			    console.log(value); //得到日期生成的值，如：2017-08-18
			    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
			    
			    var choosetime = value;
			    //普通兑换
				  table.render({
				    elem: '#normalexchange',
				    height:190,
				    url: urlHead2 + '/orderup/showAllUserOrdupRoom', //数据接口
					where:{//传参
						dateStr:choosetime
					},
				    skin: 'line', //行边框风格
				    cols: [[ //表头
				      	{field: 'roomname', title: '酒店名称'},
				      	{field: 'exrate', title: '兑换比例',align:"center",
				      		templet:function(d){
				      			var showexrate = 1 + ":" + d.exrate;
				      			return showexrate;
				      		}
				      	}
				    ]],
				    done: function(res, curr, count){
				     	console.log("数据格式：" + res);
				    }
				  });
				  
				 		// 秒杀兑换
				   table.render({
				    elem: '#seckillexchange',
				    height:190,
				    url: urlHead2 + "/killup/getKillupRoom", //数据接口
					where:{//传参
						dateStr:choosetime
					},
				    skin: 'line', //行边框风格
				    cols: [[ //表头
				      	{field: 'roomname', title: '酒店名称'},
				      	{field: 'rate', title: '兑换比例',align:"center",width:93,
					      	templet:function(d){
				      			var showrate = 1 + ":" + d.rate;
				      			return showrate;
					      	}
				      	},
                        {field:'begintime',title:'开始时间',style:'color:#FF5722',width:185,align:"center",
                            templet:function (d) {
                                var begintime = changetimetype(d.begintime);//转换时间格式
                                return begintime;
                            }
                        }
				    ]]
				  });
			}
		  });  
		  
		  //监听普通兑换行单击事件
			table.on('row(normalexchange)', function(obj){
			  console.log(obj.tr) //得到当前行元素对象
			  console.log(obj.data) //得到当前行数据
			  
			  //详细信息弹层
			  layer.alert('登录后才能查看详情',function(){
			      location.href =  "../user/login_by_username.html";
			  });

			});
			
			//监听秒杀兑换行单击事件
			table.on('row(seckillexchange)', function(obj){
			  console.log(obj.tr) //得到当前行元素对象
			  console.log(obj.data) //得到当前行数据
			  
			  //详细信息弹层
				layer.alert('登录后才能查看详情',function(){
                    location.href =  "../user/login_by_username.html";
                });
			});
		  
		});
		</script>
</body>

</html>

